<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import './Xiangqing.model.css'
// @ts-ignore
import { getFavSet, saveFavSet } from './favStore'


const route = useRoute()
const router = useRouter()
const detail = ref<any>(null)

// 选中状态
const selectedSize = ref<string | null>(null)
const selectedColor = ref<string | null>(null)
const selectedCount = ref(1)
const message = ref('')

// 尺寸点击
function toggleSize(size: string) {
    selectedSize.value = selectedSize.value === size ? null : size
}
// 颜色点击
function toggleColor(color: string) {
    selectedColor.value = selectedColor.value === color ? null : color
}
// 数量加减
function addCount() {
    selectedCount.value++
}
function subCount() {
    if (selectedCount.value > 1) selectedCount.value--
}

const addCart = async () => {
    if (!selectedColor.value) {
        message.value = '请选择颜色'
        setTimeout(() => (message.value = ''), 1500)
        return
    }
    if (!selectedSize.value) {
        message.value = '请选择尺寸'
        setTimeout(() => (message.value = ''), 1500)
        return
    }
    const userId = localStorage.getItem('userId') || '68653b928e724b9927f7d3a5'
    try {
        await axios.post('http://localhost:3000/YSK/addcart', {
            shopId: detail.value._id,
            userId,
            name: detail.value.name,
            img: detail.value.img,
            price: detail.value.price,
            colorx: selectedColor.value,
            chima: selectedSize.value,
            num: selectedCount.value
        })
        message.value = '已加入购物车'
        setTimeout(() => (message.value = ''), 1500)
    } catch (e) {
        message.value = '加入购物车失败'
        setTimeout(() => (message.value = ''), 1500)
    }
}

const buyNow = () => {
    message.value = '立即购买功能开发中...'
    setTimeout(() => (message.value = ''), 1500)
}

const favSet = ref(getFavSet())
function toggleFav(id: string) {
  if (favSet.value.has(id)) {
    favSet.value.delete(id)
  } else {
    favSet.value.add(id)
  }
  saveFavSet(favSet.value)
}

const colorMap: Record<string, string> = {
  '黑色': '#000',
  '灰色': '#888',
  '白色': '#fff',
  '棕色': '#a0522d',
  '红色': '#ff4d4f',
  '蓝色': '#409eff',
  '黄色': '#fadb14',
  '绿色': '#52c41a',
  '粉色': '#ff85c0',
  '紫色': '#722ed1',
  '橙色': '#fa8c16',
  '银色': '#c0c0c0',
  '金色': '#ffd700'
}

onMounted(async () => {
    const id = route.query.id
    if (id) {
        const res = await axios.get(`http://localhost:3000/YJL/detail?id=${id}`)
        console.log(res);

        detail.value = res.data.data
    }
    favSet.value = getFavSet()
})
function goHome() {
  router.push('/home')
}
</script>
<template>
    <div class="detail-page" v-if="detail">
        <!-- 顶部返回和收藏 -->
        <div class="detail-header">
            <span class="icon-back" @click="goHome">←</span>
            <span class="icon-fav" :class="{ favActive: favSet.has(detail._id) }" @click="toggleFav(detail._id)">
                <span v-if="favSet.has(detail._id)">♥</span>
                <span v-else>♡</span>
            </span>
        </div>
        <!-- 商品大图 -->
        <div class="s-img-box">
            <img :src="detail.images" :alt="detail.name" class="detail-img" />
        </div>
        <!-- 商品名、销量、评分 -->
        <div class="detail-title-row">
            <div>
                <h2 class="detail-title">{{ detail.name }}</h2>
                <div class="detail-meta">
                    <span class="detail-sold">{{ detail.sold || '5600' }}人买</span>
                    <span class="detail-star">★ {{ detail.star || '4.6' }}<span class="detail-reviews">({{
                        detail.reviews || '5800' }}评论)</span></span>
                </div>
            </div>
            <span class="icon-fav" :class="{ favActive: favSet.has(detail._id) }" @click="toggleFav(detail._id)">
                <span v-if="favSet.has(detail._id)">♥</span>
                <span v-else>♡</span>
            </span>
        </div>
        <!-- 商品描述 -->
        <div class="detail-desc">
            <div class="desc-title">商品描述</div>
            <div class="desc-content">{{ detail.desc || '暂无描述' }}</div>
        </div>
        <!-- 尺寸和颜色 -->
        <div class="detail-attrs">
            <div class="attr-row">
                <span class="attr-label">尺寸</span>
                <span class="attr-btn" v-for="(item, idx) in detail.chima" :key="idx"
                    :class="{ 'active': selectedSize === item.context }" @click="toggleSize(item.context)">
                    {{ item.context }}
                </span>
            </div>
            <div class="attr-row">
                <span class="attr-label">颜色</span>
                <span class="color-btn" v-for="(item, idx) in detail.colorx" :key="idx"
                    :title="item.context"
                    :class="{ 'color-active': selectedColor === item.context }"
                    :style="{ background: colorMap[item.context as string] || '#eee' }"
                    @click="toggleColor(item.context)"></span>
            </div>
            <div class="attr-row">
                <span class="attr-label">数量</span>
                <button class="num-btn" @click="subCount">-</button>
                <span class="num-value">{{ selectedCount }}</span>
                <button class="num-btn" @click="addCount">+</button>
            </div>
        </div>
        <!-- 底部价格和按钮 -->
        <div class="detail-bottom">
            <span class="detail-price">￥{{ detail.price }}</span>
            <button class="add-cart-btn" @click="addCart">加入购物车</button>
            <button class="add-cart-btn" @click="buyNow">立即购买</button>
        </div>
        <div v-if="message" class="cart-message">{{ message }}</div>
    </div>
    <div v-else>加载中...</div>
</template>
<style></style>
